window.onload=function(){
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        // color: "121, 162, 185", 	//点颜色
        color: "255,255,255", 	//点颜色
        // stroke: "130,255,255", 		//线条颜色
        // stroke: "240,250,228", 		//线条颜色
        stroke: "#ccc", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }
    //调用
    CanvasParticle(config);
}

/* 
    数据渲染

*/

let dataList =
    [    
{ "category": "finance", "img": "szyh.png", "name": "苏州银行数据API服务系统", "desc": "苏州银行的前身是江苏东吴农村商业银行股份有限公司，2011年经监管批准，由农村中小金融机构监管序列调整为中小商业银行监管序列。2019年8月2日，苏州银行登陆A股，为全国第33家、江苏省第9家上市银行。2020年3月9日，“2019年中国银行业100强榜单”发布，苏州银行排名第51位。" },
{ "category": "finance", "img": "hcfc2.png", "name": "河北幸福消金三方数据管理平台", "desc": "河北幸福消费金融股份有限公司是河北省首家批准成立的消费金融公司。公司坚持以“融入互联网生态，融入河北生态，融入股东生态”为主线，打造产品服务、内容服务和能力服务为核心目标，致力于打造一家以技术为驱动、以智慧金融和普惠金融为特色的公众公司。截至2019年底，幸福消金累计投放贷款近500亿元，全年新增270亿元。" },
{ "category": "finance", "img": "sznsyh.png", "name": "苏州农商行数据敏捷共享平台", "desc": "苏州农商银行是全国第四家A股上市的农商银行，也是银监会成立后在新监管框架下第一批挂牌开业的农村商业银行。近年来，苏州农商银行聚焦主责主业，以支农支小、服务地方经济建设为主要目标，践行了一条符合自身实际的差异化定位、特色化经营之路。在当下金融行业数字化转型的大潮中，" },

{ "category": "business", "img": "zhylian.png", "name": "中国银联便民缴费内容交换平台", "desc": "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。" },
{ "category": "business", "img": "zgtxfw.png", "name": "中通服三方数据管理平台", "desc": "本项目是建设中国通信服务股份有限公司上海分公司（以下简称“中通服”）的三方数据管理平台，通过智能数据管理平台的线上化系统，进行业务数据的有效管理，规范业务操作流程，防范业务风险，实现资源共享、高效一致的有效运作。" },
{ "category": "business", "img": "airbus.png", "name": "空客VOOM BI分析系统", "desc": "Voom 是一个由 Airbus 运营，方便、可靠的直升机订单、运营管理(B2C，B2B)平台，能给有需求的旅客提供便捷、快速的城市直升机服务。本项目涉及Voom的数据仓库和BI工具的建设，服务对象为Voom管理人员和运营人员，为Voom服务的管理决策，和日常运营的精细化改进提供数据支撑。" },

{ "category": "government", "img": "scm.png", "name": "苏城码", "desc": "中国银联（China UnionPay）成立于2002年3月，是经国务院同意，中国人民银行批准设立的中国银行卡联合组织，总部设于上海。截至2019年9月，中国银联已成为全球发卡量最大的卡组织，发行近80亿张银行卡。" },
{ "category": "government", "img": "sgaj.png", "name": "大数据防线", "desc": "华东某市公安局，高度重视智慧公安建设，依托大数据赋能警务实战。并在全国率先提出通过融合多源异构海量数据，进一步提升精准化研判、预判水平。并委托聚合数据帮助其建设智能化平台。" },
{ "category": "government", "img": "szfjg.png", "name": "市域社会治理", "desc": "华东某市获批全国首批市域社会治理现代化试点城市，紧密围绕中央、省、市决策部署，立足该市实际，突出问题导向，超前谋划、大胆探索，精准推进政法智能化深度应用，搭建统一集成、高效协同、市域一体的社会治理现代化综合指挥平台。" }

]


let caseU1=document.querySelector('.case-main1')
let caseU2=document.querySelector('.case-main2')
let caseU3=document.querySelector('.case-main3')


/* 
    需求1：将img的src的值传入  就是将数据动态传入
*/

let caseMain1=''
let caseMain2=''
let caseMain3=''

dataList.forEach(function(dom){
    console.log(dom.category);
    if(dom.category=="finance"){
        caseMain1+=`
        <li class=" fl">
            <div class="case-limain ">
                <img src="../imgs/${dom.img}" alt="">
                <h4>${dom.name}</h4>
                <h6>${dom.desc}</h6>
                <a>了解详情</a>
            </div>
        </li>
        `

        caseU1.innerHTML=caseMain1


    }else if(dom.category=="government"){
        caseMain2+=`
        <li class=" fl">
            <div class="case-limain ">
                <img src="../imgs/${dom.img}" alt="">
                <h4>${dom.name}</h4>
                <h6>${dom.desc}</h6>
                <a>了解详情</a>
            </div>
        </li>
        `
        caseU2.innerHTML=caseMain2

    }else if(dom.category=="business"){
        caseMain3+=`
        <li class="fl">
            <div class="case-limain ">
                <img src="../imgs/${dom.img}" alt="">
                <h4>${dom.name}</h4>
                <h6>${dom.desc}</h6>
                <a>了解详情</a>
            </div>
          
        </li>
        `
        caseU3.innerHTML=caseMain3

    }
   
    // caseMain+=`
    // <li class="ab fl">
    //     <div class="case-limain ab">
    //         <img src="../imgs/${dom.img}" alt="">
    //         <h4>${dom.name}</h4>
    //         <h6>${dom.desc}</h6>
    //     </div>
    // </li>
    // `

})



/* 
    需求2：当floor在窗口滚动到一定的距离的时候，
    就是 楼层定位的高度==楼层与窗口顶部的高度
    将定位变成固定定位，并且盖度改变
*/


/* 
    获取元素
*/

let floor=document.querySelector('.floor')  //获取楼层
let floorP=document.querySelectorAll('.floor p')  //获取楼层里面的 p
let floorLi=document.querySelectorAll('.floorLi')  //获取P对应的楼层
let floorLi2=document.querySelectorAll('.floorLi li')  //获取P对应的楼层




window.addEventListener('scroll',function(){
    //获取滚动距离
   let floPosition= document.documentElement.scrollTop
   //console.log(floPosition);
   if(floPosition>=600){   //如果滚动距离大于400就将floor的定位变成固定定位
       floor.classList.add('floor-gd')
   }else{  //当滚动距离小于400的时候，就变成绝对定位 所以就删除floor-gd
        floor.classList.remove('floor-gd')

   }
})


/* 
    需求3：当点击的p的时候就滚动到
    他对应的主题内容里面的案例距离窗口顶部的距离
    同时激活样式也要改变
*/

let count=0
floorP.forEach(function(dom2,i){
    dom2.addEventListener('click',function(){
        //激活样式
        floorP[count].classList.remove('active')
        this.classList.add('active')   //给当前添加激活样式
        count=i


        //console.log(12536);
        //floorLi.offset.top
        console.log(floorLi[i].offsetTop);  /*我们通过索引找到了第一个ul获取了他到浏览器顶部的距离*/

        let floorLiTop=floorLi[i].offsetTop
        window.scrollTo({
            top:floorLiTop,
            behavior:'smooth'
        })
    })
})


/* 
    需求4：当点击li的时候就跳转到银行详情页面
*/

floorLi2.forEach(function(aa){
    aa.addEventListener('click',function(){
        location.href=('../page/银行详情.html')
    })

})








